<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .active {
      color: red;
    }
  </style>
</head>

<body>
  <div id="app">
    =={{msg}}==={{total('我是computed计算属性的传参写法')}}
    <hr />
    姓名： <input type="text" v-model="name">
    分数:<input type="text" v-model.number="score">
    <button @click="add">添加</button>
    <ul>
      <li v-for="(item, index) in arr" :key="item.id">
        {{item.id}}==={{item.name}}==={{item.subject}}====<span :class="{active:item.score<60}">{{item.score}}</span>===
        <button @click="del(item.id)">删除</button>
      </li>
    </ul>

    自动求班级的平均值:==={{avg}}
  </div>
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.14/vue.min.js"></script>
  <script>
    var vm = new Vue({
      el: "#app",
      data: {
        msg: 'hello  vue',
        name: '',
        score: '',
        arr: [
          { id: 1, name: 'jack', subject: '数学', score: 80 },
          { id: 2, name: 'rose', subject: '数学', score: 70 },
          { id: 3, name: 'tom', subject: '数学', score: 90 }
        ],
      },
      methods: {
        del (id) {
          this.arr = this.arr.filter(item => item.id != id)
        },
        add () {
          // console.log(this.avg);
          this.arr.push(
            {
              id: Date.now(),
              name: this.name,
              score: this.score,
              subject: '数学'
            }
          )
          this.name = this.score = ''
        }
      },
      computed: {
        avg () {
          return this.arr.reduce((sum, item) => sum + item.score, 0) / this.arr.length
        },
        total () {
          // return this.msg
          return function (str) {
            return this.name + '*****' + str
          }
        }
      }
    })

    // console.log(vm, 2222);
  </script>
</body>

</html>